<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>E宠购物车</title>
	<style>
		.he{
  width: 1128px;
  height: 70px;
  margin: 0 auto;

} 
	  main {
  width: 500px;
  margin: 0 auto;
  margin-top: 100px;
  position: relative;
  border: 1px solid #cecece;
  background-color: #f1d1d1;
}
.mid,
.mid img {
  width: 500px;
  height: 400px;
}
.fdj {
  display: none;
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: rgba(99, 99, 90, 0.425);
  cursor: move;
}
.big {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 521px;
  overflow: hidden;
  top: -1px;
  display: none;
}
.big img {
  position: absolute;
  width: 800px;
  height: 800px;
}
.small {
  height: 80px;
  padding: 10px;
}
.small img {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  margin-left: 30px;
  box-sizing: border-box;
}
.small img:nth-of-type(1) {
  border: 1px solid red;
}


/* 可加入购物车样式 */
* {
  margin: 0;
  padding: 0;
  font-family: "微软雅黑";
  list-style: none;
  color: #666;
  text-decoration: none;
  font-size: 14px;
}
body {
  background: #f5f5f5;
  /* height: 100%; */
}
.header{
font-size: 12px;
border-bottom: 2px solid #ff6700;
background: #fff;
color: #b0b0b0;
position: relative;
z-index: 20;
height: 100px;
}
.header .container {
position: relative;
width: 1226px;
margin-right: auto;
margin-left: auto;
}
.header .container .header-logo {
width: 93px;
margin-top: 26px;
}

.logo {
width: 48px;
height: 48px;
position: relative;
display: block;
width: 55px;
height: 55px;
overflow: hidden;
background-color: #ff6700;
}
.header-title {
float: left;
margin-top: 26px;
font-size: 12px;
}
.topbar-info {
margin-top: 30px;
line-height: 40px;
}
.link {
padding: 0 5px;
color: #757575;
text-decoration: none;
}
.hid {
  overflow: hidden;
}
.left {
  float: left;
}
.box_head{
position: relative;
margin: 0;
height: 50px;
font-size: 30px;
font-weight: 400;
color: #757575;
border-top: 1px solid #e0e0e0;
}
.box_head span{
position: absolute;
top: -20px;
left: 372px;
height: 40px;
width: 482px;
line-height: 40px;
text-align: center;
display: block;
background-color: #f5f5f5;
font-size: 30px;
}
#box {
  width:1240px;
  margin: 20px auto;
}
#box ul {
  margin-right: -14px;
  overflow: hidden;
}
#box li {
  width: 234px;
  float: left;
  margin-right: 14px;
  padding: 24px 0 20px;
  background: #e7d7d7;
  text-align: center;
  position: relative;
  cursor: pointer;
  margin-bottom:14px;
  border-radius: 80% ;
}
.pro_img {
  width: 150px;
  height: 150px;
  margin: 0 auto 18px;
  

}
.pro_img img{
  border-radius: 80% ;

}
.pro_name {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 400;
}
.pro_name a {
  color: #9d669a;
  font-size: 20px;

}
.pro_price {
  color: #ef98a0;
  margin: 50px;
  font-size: 30px;
  font-weight: 700;
}
.pro_rank {
  color: #757575;
  margin: 10px;
}
#box li:hover .add_btn {
  display: block;
}
#box li:hover .pro_rank {
  opacity: 0;
}
#box li .add_btn:hover {
  background-color: rgb(228, 184, 224);
  color: rgb(244, 236, 236);
  font-size: 20px;
  
}



.add_btn {
  height: 30px;
  position: absolute;
  width: 200px;
  bottom: 0px;
  left:79px;
  margin-left: -61px;
  line-height: 22px;
  display: block;
  font-weight: 700;
  line-height: 30px;
  color: rgb(247, 240, 245);
  font-size: 20px;
  background-color: #ae8cc8;
  border-radius: 20px;
}
.car {
  width: 1240px;
  margin: 20px auto;
  background: #FFF;
}
.car .check{
  width: 50px;

}
.car .check i{
  color: #fff;
  display: inline-block;
  
  width: 18px;
  height: 18px;
  line-height: 18px;
  border: 1px solid #e0e0e0;
  margin-left: 24px;
  background-color: #fff;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
  position: relative;
  top: -1px;
  cursor: pointer;
  font-family: "iconfont";
}
.i_acity {

  border-color: #ff6700 !important;
  background-color: #ff6700 !important;
}
.car .img {
  width: 190px;
}
.car .img img {
  display: block;
  width: 80px;
  height: 80px;
  margin: 3px auto;
}
.car .name {
  width: 300px;
}
.car .name span {
  line-height: 1;
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.car .price {
  width: 144px;
  text-align: right;
  padding-right: 84px;
}
.car .price span {
  color: #ff6700;
  font-size: 16px;
}
.car .number{
  width: 150px;
}
.car .subtotal{
  width: 130px;
  
}
.car .ctrl {
  width: 105px;
  padding-right:25px;
  text-align: center;
}
.car .ctrl a {
  font-size: 20px;
  cursor: pointer;
  display: block;
  width: 26px;
  height: 26px;
  margin: 30px auto;
  line-height: 26px;
}
.car .ctrl a:hover {
  color: #FFF;
  background: #ff6700;
  border-radius: 50%;
}
.head_row {
  height: 70px;
  line-height: 70px;
}
.head_row, .row {
  border-bottom: solid 1px #e0e0e0;
}
.row {
  height: 86px;
  line-height:86px;
  padding: 15px 0;
  margin: 0px;
}
#sum_area{
  width:1240px;
  height: 160px;
  background: white;
  margin: 20px auto;
}
#sum_area #pay{
  width:200px;
  height:60px;
  text-align: center;
  float: right;
  border-radius: 40px;
  line-height: 60px;
  font-size: 19px;
  background: #b97dc6;
  color: white;
}
#sum_area #pay_amout{
  width:250px;
  height:60px;
  text-align: center;
  float: right;
  line-height: 60px;
  font-size: 16px;
  color:#8a4aaf ;
}
#sum_area #pay_amout #price_num{
  width:100px;
  height: 60px;
  font-size: 25px;
  color:#FF4B00 ;
}

.item_count_i{
  height: 85px;
  width:10%;
  float: left;
  margin-right: 25px;
}
.num_count{
  width:150px;
  height:40px;
  border: 1.2px solid #E0E0E0;
  float:right;
  margin-top: 21px;

}
.count_i{
  width:30%;
  height:40px;
  line-height: 40px;
  float: left;
  text-align: center;
  font-size:21px;
  color: #747474;
}
.count_i:hover{
  width:30%;
  height:40px;
  line-height: 40px;
  float: left;
  text-align: center;
  font-size:21px;
  color: #747474;
  background: #f1c6c6;
  cursor: pointer;
}
.c_num{
  width:40%;
  height:40px;
  line-height: 40px;
  float: left;
  text-align: center;
  font-size:16px;
  color: #747474;
}
.count_d{
  width:30%;
  height:40px;
  line-height: 40px;
  float: left;
  text-align: center;
  font-size:25px;
  color: #747474;
}
.count_d:hover{
  width:30%;
  height:40px;
  line-height: 40px;
  float: left;
  text-align: center;
  font-size:25px;
  color: #747474;
  background: #f0c9c9;
  cursor: pointer;
}
.i_acity2 {
  border-color: #ae8cc8 !important;
  background-color: #ff6700 !important;
}
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	


<!-- 
<script>
	let mid = document.querySelector(".mid");
	let big = document.querySelector(".big");
	let small = document.querySelector(".small");

  </script> -->




<script>
	$(function() {
		//获取url中的参数
		function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if(r != null) return unescape(r[2]);
			return null; //返回参数值
		}
		//接收URL中的参数goodsId
		var id = getUrlParam('goodsId');
		
		$.ajax({
			type: 'get',
			url: 'goods.json',
			dataType: 'json',
			success: function(res, status) {
				$.each(res.goods, function(idx, val) {
					//根据id获取详情数据
					if(id == val.id) {
						var str = "<img src='" + val.imgUrl + "'/><p>商品编号：" + val.id + "</p><p>产品名称：" + val.title + "</p><p>商品简介：" + val.desc + "</p>";
					}
					$('.booksDeatail').append(str);
				});
			},
			error: function(error) {
				console.log(error)
			}
		})
	})
</script>

<!-- 可以加入购物车的商品 -->
<script>
	window.onload = function() {
		var aData = [{
				"imgUrl": "https://image2.suning.cn/uimg/b2c/newcatentries/0070085336-000000000611276327_2_800x800.jpg",
				"proName": " 良良婴儿枕头 ",
				"proPrice": "158.00",
				"proComm": "10"
			},
			{
				"imgUrl": "https://image1.suning.cn/uimg/b2c/newcatentries/0070154344-000000000717372082_1_800x800.jpg",
				"proName": " 安多贝比婴儿被 ",
				"proPrice": "69.00",
				"proComm": "4"
			},
			
			{
				"imgUrl": "https://image3.suning.cn/uimg/b2c/newcatentries/0070174632-000000000835929712_2_800x800.jpg",
				"proName": " 思萌SMOOMS 婴儿纱布浴巾",
				"proPrice": "69.0",
				"proComm": "6"
			},
      {
				"imgUrl": "https://image4.suning.cn/uimg/b2c/newcatentries/0070154567-000000000605721005_2_800x800.jpg",
				"proName": " 新生儿尿布",
				"proPrice": "59.9",
				"proComm": "7"
			},
			{
				"imgUrl": "https://image1.suning.cn/uimg/b2c/newcatentries/0070135644-000000000184595255_1_800x800.jpg",
				"proName": " 新生儿婴儿床",
				"proPrice": "296",
				"proComm": "3"
			},
		];
		var oBox = document.getElementById("box");
		var oCar = document.getElementById("car");
		var oUl = document.getElementsByTagName("ul")[0];

		for (var i = 0; i < aData.length; i++) {
			var oLi = document.createElement("li");
			var data = aData[i];

			oLi.innerHTML += '<div class="pro_img"><img src="' + data["imgUrl"] + '" width="150" height="150"></div>';
		
      oLi.innerHTML += '<h3 class="pro_name"><a href="#">' + data["proName"] + '</a></h3>';

      oLi.innerHTML += '<p class="pro_price">' + data["proPrice"] + '元</p>';
		
			oLi.innerHTML += '<div class="add_btn">加入购物车</div>';
			oUl.appendChild(oLi);

		}
		var aBtn = getClass(oBox, "add_btn");//获取box下的所有添加购物车按钮
		var number = 0;//初始化商品数量
		for (var i = 0; i < aBtn.length; i++) {
			number++;
			aBtn[i].index = i;
			aBtn[i].onclick = function() {
				var oDiv = document.createElement("div");
				var data = aData[this.index];
				oDiv.className = "row hid";
				oDiv.innerHTML += '<div class="check left"> <i class="i_check" id="i_check" οnclick="i_check()" >√</i></div>';
				oDiv.innerHTML += '<div class="img left"><img src="' + data["imgUrl"] + '" width="80" height="80"></div>';
				oDiv.innerHTML += '<div class="name left"><span>' + data["proName"] + '</span></div>';
				oDiv.innerHTML += '<div class="price left"><span>' + data["proPrice"] + '元</span></div>';
				oDiv.innerHTML +=' <div class="item_count_i"><div class="num_count"><div class="count_d">-</div><div class="c_num">1</div><div class="count_i">+</div></div> </div>'
				oDiv.innerHTML += '<div class="subtotal left"><span>' + data["proPrice"] + '元</span></div>'
				oDiv.innerHTML += '<div class="ctrl left"><a href="javascript:;">×</a></div>';
				oCar.appendChild(oDiv);
				var flag = true;
				var check = oDiv.firstChild.getElementsByTagName("i")[0];
				check.onclick = function() {
					// console.log(check.className);
					if (check.className == "i_check i_acity") {
						check.classList.remove("i_acity");

					} else {
						check.classList.add("i_acity");
					}
					getAmount();
				}
				var delBtn = oDiv.lastChild.getElementsByTagName("a")[0];
				delBtn.onclick = function() {
					var result = confirm("确定删除吗?");
					if (result) {
						oCar.removeChild(oDiv);
						number--;
						getAmount();
					}
				}
				var i_btn = document.getElementsByClassName("count_i");
				for (var k = 0; k < i_btn.length; k++) {
					i_btn[k].onclick = function() {
						bt = this;
						//获取小计节点
						at = this.parentElement.parentElement.nextElementSibling;
						//获取单价节点
						pt = this.parentElement.parentElement.previousElementSibling;
						//获取数量值
						node = bt.parentNode.childNodes[1];
						console.log(node);
						num = node.innerText;
						num = parseInt(num);
						num++;
						node.innerText = num;
						//获取单价
						price = pt.innerText;
						price = price.substring(0, price.length - 1);
						//计算小计值
						at.innerText = price * num + "元";
						//计算总计值
						getAmount();
					}
				}
				//获取所有的数量减号按钮
				var d_btn = document.getElementsByClassName("count_d");
				for (k = 0; k < i_btn.length; k++) {
					d_btn[k].onclick = function() {
						bt = this;
						//获取小计节点
						at = this.parentElement.parentElement.nextElementSibling;
						//获取单价节点
						pt = this.parentElement.parentElement.previousElementSibling;
						//获取c_num节点
						node = bt.parentNode.childNodes[1];
						num = node.innerText;
						num = parseInt(num);
						if (num > 1) {
							num--;
						}
						node.innerText = num;
						//获取单价
						price = pt.innerText;
						price = price.substring(0, price.length - 1);
						//计算小计值		
						at.innerText = price * num + "元";
						//计算总计值
						getAmount();
					}
				}

				delBtn.onclick = function() {
					var result = confirm("确定删除吗?");
					if (result) {
						oCar.removeChild(oDiv);
						number--;
						getAmount();
					}
				}

			}
		}

	}

	function getClass(oBox, tagname) {
		var aTag = oBox.getElementsByTagName("*");
		var aBox = [];
		for (var i = 0; i < aTag.length; i++) {
			if (aTag[i].className == tagname) {
				aBox.push(aTag[i]);
			}
		}
		return aBox;
	}


	var index = false;
	function checkAll() {
		var choose = document.getElementById("car").getElementsByTagName("i");
		// console.log(choose);
		if (choose.length != 1) {
			for (i = 1; i < choose.length; i++) {
				if (!index) {
					choose[0].classList.add("i_acity2")
					choose[i].classList.add("i_acity");
				} else {
					choose[i].classList.remove("i_acity");
					choose[0].classList.remove("i_acity2")
				}
			}
			index = !index;
		}
		getAmount();
	}



	//进行价格合计
	function getAmount() {
		// console.log(ys);
		ns = document.getElementsByClassName("i_acity");
		console.log(ns);
		sum = 0;
		//选中框
		document.getElementById("price_num").innerText = sum;
		for (y = 0; y < ns.length; y++) {
			//小计
			amount_info = ns[y].parentElement.parentElement.lastElementChild.previousElementSibling;
			num = parseInt(amount_info.innerText);
			sum += num;
			document.getElementById("price_num").innerText = sum;
		}
	}
</script>
</head>
<body>
	<div id="box">
		<h2 class="box_head"><span>选择好物</span></h2>
		<ul>
		</ul>
	</div>

<div id="car" class="car">

		<div class="head_row hid">
			<div class="check left"> <i onclick="checkAll()">√</i></div>
			<div class="img left">&nbsp;&nbsp;全选</div>
			<div class="name left">商品名称</div>
			<div class="price left">单价</div>
			<div class="number left">数量</div>
			<div class="subtotal left">小计</div>
			<div class="ctrl left">操作</div>
		</div>


	</div>
	<div id="sum_area">
		<div id="pay" onclick="abc()">去结算</div>
		<div id="pay_amout">合计：<span id="price_num">0</span>元</div>
	</div>
</body>
<script>
	function abc(){
		location.href=''
	}
</script>
</body>
</html>